<template>
  <div id="container">
    <div class="bread">
      <span>当前位置：</span>
      <el-breadcrumb separator=">">
        <el-breadcrumb-item :to="{ path: '/personal' }"
          >个人中心</el-breadcrumb-item
        >
        <el-breadcrumb-item :to="{ path: '/personal/Custom' }"
          >客服</el-breadcrumb-item
        >
        <el-breadcrumb-item>帮助中心</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="content">
      <div class="left">
        <div class="problemBox" v-for="item in helpList" :key="item.id">
          <h3>{{ item.title }}</h3>
          <ul>
            <li
              v-for="list in item.lists"
              :key="list.id"
              :class="{ chose: list.id == bzwd_id }"
              @click="choseProblem(list.id)"
            >
              <span class="tips"></span>
              <span class="titleName">{{ list.title }}</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="right">
        <div class="top">
          <span></span>
          <h3>帮助中心</h3>
        </div>
        <div class="problemBox">
          <h3>{{ problemTitle }}</h3>
          <p v-html="contents"></p>
          <span
            class="fujian"
            @click="downFj"
            style="color: #08a579"
            v-if="file_url != ''"
            >附件下载</span
          >
        </div>
        <!-- <div class="page1">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            background
            :page-sizes="[7, 14, 21, 28]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="145"
          >
          </el-pagination>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
import { list_bzwdtype, list_bzwd, info_bzwd } from "../../api/http";
export default {
  data() {
    return {
      helpList: [], //帮助文档分类
      bzwdtype_id: "", //分类id
      bzwd_id: "", //问题id
      problemTitle: "", //问题标题
      contents: "", //问题解决方案富文本
      file_url: "", //附件链接
    };
  },
  created() {
    console.log(this.$route.query);
    this.bzwdtype_id = this.$route.query.bzwdtype_id;
    this.bzwd_id = this.$route.query.id;
    //获取帮助文档分类
    list_bzwdtype({
      md5key: localStorage.getItem("md5key"),
      contenttype_id: 301,
    }).then((res) => {
      console.log(res, "帮助文档分类");
      this.helpList = res.retRes;
      this.bzwd_id = this.$route.query.id?this.$route.query.id:this.helpList[0].lists[0].id;
      //获取帮助文档详情
      info_bzwd({
        md5key: localStorage.getItem("md5key"),
        id: this.bzwd_id ? this.bzwd_id : this.helpList[0].lists[0].id,
      }).then((res) => {
        if (res.retInt == 1) {
          console.log(res, "帮助文档详情");
          this.problemTitle = res.retRes.title;
          this.contents = res.retRes.contents;
          this.file_url = res.retRes.file_url;
        }
      });
    });
    //获取帮助文档列表
    list_bzwd({
      md5key: localStorage.getItem("md5key"),
      bzwdtype_id: this.bzwdtype_id,
      // contenttype_id:301,
    }).then((res) => {
      if (res.retInt == 1) {
        console.log(res.retRes, "帮助文档列表");
      }
    });
  },
  methods: {
    choseProblem(id) {
      this.bzwd_id = id;
      //获取帮助文档详情
      info_bzwd({
        md5key: localStorage.getItem("md5key"),
        id: this.bzwd_id,
      }).then((res) => {
        if (res.retInt == 1) {
          console.log(res, "帮助文档详情");
          this.problemTitle = res.retRes.title;
          this.contents = res.retRes.contents;
          this.file_url = res.retRes.file_url;
        }
      });
    },
    //附件下载
    downFj() {
      window.open(this.file_url);
      // let url = this.file_url;
      // const a = document.createElement("a");
      // a.href = url;
      // a.download = this.problemTitle;
      // a.style.display = "none";
      // document.body.appendChild(a);
      // a.click();
      // document.body.removeChild(a);
    },
    //分页
    // handleSizeChange(val) {
    //   console.log(`每页 ${val} 条`);
    // },
    // handleCurrentChange(val) {
    //   console.log(`当前页: ${val}`);
    // },
  },
};
</script>
<style>
/* 面包屑 */
.el-breadcrumb__inner a,
.el-breadcrumb__inner.is-link:hover {
  color: #08a579;
}
.el-breadcrumb__inner a,
.el-breadcrumb__inner.is-link {
  font-weight: normal;
  color: #626366;
}
.el-breadcrumb__separator {
  color: #626366;
}
</style>
<style lang="less" scoped>
#container {
  margin-bottom: 60px;
  height: 100%;
  background-color: #f0f0f5;
  overflow: hidden;
  .bread {
    display: flex;
    margin: 10px auto;
    width: 1200px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #626366;
    line-height: 24px;
    .el-breadcrumb {
      font-size: 14px;
      line-height: 24px;
      /deep/.el-breadcrumb__item:last-child {
        .el-breadcrumb__inner {
          color: #08a579;
        }
      }
    }
  }
  .content {
    display: flex;
    width: 1200px;
    margin: 0 auto;
    background-color: #fff;
    .left {
      display: flex;
      flex-direction: column;
      padding-bottom: 30px;
      width: 300px;
      border-right: 1px solid #dee0e3;
      .problemBox {
        margin-left: 30px;
        h3 {
          margin-bottom: 20px;
          margin-top: 40px;
          color: #333333;
          font-size: 16px;
          cursor: pointer;
        }
        ul {
          li {
            display: flex;
            align-items: center;
            line-height: 34px;
            cursor: pointer;
            .tips {
              display: inline-block;
              margin-right: 10px;
              width: 4px;
              height: 4px;
              background: #c8c9cc;
              border-radius: 50%;
            }
            .titleName {
              font-size: 14px;
              color: #646566;
            }
          }
          li:hover {
            .tips {
              background: #08a579;
            }
            .titleName {
              color: #08a579;
            }
          }
          .chose {
            .tips {
              background: #08a579;
            }
            .titleName {
              color: #08a579;
            }
          }
        }
      }
    }
    .right {
      .top {
        display: flex;
        margin: 30px 0px 40px 30px;
        span {
          display: inline-block;
          position: relative;
          top: 5px;
          margin-right: 10px;
          width: 3px;
          height: 20px;
          background: #08a579;
          border-radius: 2px;
        }
        h3 {
          font-size: 20px;
        }
      }
      .problemBox {
        width: 840px;
        margin-left: 30px;
        padding-bottom: 30px;
        // border-bottom: 1px dashed #dee0e3;
        h3 {
          margin-bottom: 20px;
          margin-top: 40px;
          color: #333333;
          font-size: 16px;
          font-family: Microsoft YaHei;
        }
        p {
          color: #969799;
          font-size: 14px;
        }
        .fujian {
          display: inline-block;
          margin-top: 20px;
          cursor: pointer;
        }
        ul {
          li {
            line-height: 34px;
            a {
              font-size: 12px;
              color: #969799;
            }
          }
        }
      }
      // .page1 {
      //   width: 700px;
      //   margin: 0 auto;
      //   margin-bottom: 150px;
      // }
      .el-pagination {
        text-align: right;
        margin: 20px 80px 20px 0;
      }
    }
  }
}
</style>
